<app-page>
	<div id="page-wrapper">
		<div class="row">
			<div class="col-lg-12">
				<h1 class="page-header">{{ 'Action' | translate }}</h1>
			</div>
			<!-- /.col-lg-12 -->
		</div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel panel-default">
					<div class="panel-heading">
						{{ 'Action' | translate }}
					</div>
					<!-- /.panel-heading -->
					<div class="panel-body">

						<app-loading *ngIf="!action"></app-loading>
						<div *ngIf="action" class="table-responsive">
							<table class="table table-striped">
								<tr>
									<td>{{ 'TransactionId' | translate }}:</td>
									<td><a routerLink="/transactions/{{action.transaction_id}}">{{action.transaction_id}}</a></td>
								</tr>
								<tr>
									<td>{{ 'ActionIndex' | translate }}:</td>
									<td>{{action.action_id}}</td>
								</tr>
								<tr>
									<td>{{ 'CreatedAt' | translate }}:</td>
									<td>{{action.createdAt.sec * 1000 | date:'medium'}}</td>
								</tr>
								<tr>
									<td>{{ 'HandlerAccount' | translate }}:</td>
									<td><a routerLink="/accounts/{{action.handler_account_name}}">{{action.handler_account_name}}</a></td>
								</tr>
								<tr>
									<td>{{ 'Name' | translate }}:</td>
									<td>{{action.name}}</td>
								</tr>
								<tr>
									<td>{{ 'Authorization' | translate }}:</td>
									<td>
										<span *ngFor="let account of action.authorization">
											<a routerLink="/accounts/{{account.actor}}">{{account.actor}}</a>
										</span>
									</td>
								</tr>
								<tr>
									<td colspan="2"><prettyjson [obj]="action.data"> </prettyjson></td>
								</tr>
							</table>
						</div>
					</div>
					<!-- /.panel-body -->
				</div>
				<!-- /.panel -->
			</div>
		</div>

		<!-- /.row -->
	</div>
	<!-- /#page-wrapper -->
</app-page>
